<template>
  <div>
    <el-table
      size="small"
      :data="tableData"
      @sort-change="shortHandler"
      @selection-change="handleSelectionChange"
      stripe
      border
    >
      <el-table-column
        type="selection"
        align="center"
        width="50px"
      ></el-table-column>
      <el-table-column
        width="120px"
        prop="factoryName"
        label="工厂名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="typeName"
        label="类型名称"
        align="center"
      ></el-table-column>
      <el-table-column
        sortable
        prop="serialNumber"
        label="序列号"
        align="center"
      ></el-table-column>
      <el-table-column
        sortable
        prop="name"
        label="设备名称"
        align="center"
      ></el-table-column>
      <el-table-column
        label="地址"
        align="center"
        width="100px"
      >
        <template slot-scope="scope">
          <el-button
            size="small"
            :loading="btnLoading"
            type="text"
            icon="el-icon-tickets"
            @click="checkDetail(scope.row.uuid)"
          >查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="数据"
        align="center"
        width="100px"
      >
        <template slot-scope="scope">
          <el-button
            size="small"
            :loading="btnLoading"
            type="text"
            icon="el-icon-tickets"
            @click="checkData(scope.row)"
          >查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="历史数据"
        align="center"
        width="100px"
      >
        <template slot-scope="scope">
          <el-button
            size="small"
            :loading="btnLoading"
            type="text"
            icon="el-icon-tickets"
            @click="checkHistory(scope.row.uuid, scope.row.name, scope.row.serialNumber)"
          >查看</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="设备状态"
        align="center"
        width="120px"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.status === 'unknown'"
            style="color: #10aeff"
          >未知</span>
          <span
            v-else-if="scope.row.status === 'normal'"
            style="color: #07c160"
          >正常/在线</span>
          <span
            v-else-if="scope.row.status === 'abnormal'"
            style="color: #fa5151;"
          >告警</span>
          <span
            v-else-if="scope.row.status === 'oncheck'"
            style="color: #ffc300"
          >临检</span>
          <span
            v-else
            style="color: #aaa"
          >离线</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="active"
        label="是否可用"
        align="center"
        width="100px"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.active"
            style="color: #07c160;"
          >可用</span>
          <span
            v-else
            style="color: #fa5151"
          >不可用</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createdAt"
        label="创建时间"
        sortable
        align="center"
        width="160px"
      ></el-table-column>
      <el-table-column
        prop="updatedAt"
        label="更新时间"
        sortable
        align="center"
        width="160px"
      ></el-table-column>
      <el-table-column
        label="操作"
        width="140px"
        align="center"
        v-if="userGuardList.includes(guard.DeviceManage)"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            size="small"
            @click="showEdit(scope.row.uuid)"
            @refresh="search"
          >编辑</el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            size="small"
            @click="remove(scope.row.uuid, scope.row.name)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="600px"
      title="数据列表"
      :visible.sync="dialogVisible"
    >
      <el-table
        stripe
        :data="dataList"
      >
        <el-table-column
          prop="name"
          label="编号/名称"
        ></el-table-column>
        <el-table-column
          prop="display_name"
          label="中文名称"
        >
        </el-table-column>
        <el-table-column
          prop="value"
          label="数值"
        >
          <template slot-scope="scope">
            {{ scope.row.value.toString() }}
          </template>
        </el-table-column>
        <el-table-column
          prop="unit"
          label="计量单位"
        ></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      width="600px"
      title="地址"
      :visible.sync="addDialogVisible"
    >
      <el-table
        stripe
        :data="addressList"
      >
        <el-table-column
          prop="latitude"
          label="纬度"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="longitude"
          label="经度"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="location"
          label="地址"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment';
import { MomentFormat, SortType } from '../../../constants/common';
import { Message, MessageBox } from 'element-ui';
import { deleteDeviceApi, getDeviceInfoApi } from '../../../api/device';
import { parseError } from '../../../utils';
import { getDisplay, getStatusColor } from './service';

export default {
  model: {
    prop: 'sort'
  },
  props: {
    tableData: {
      type: Array,
      default() {
        return [];
      }
    },
    sort: {
      type: Object,
      default() {
        return {
          sortType: SortType.DESC
        };
      }
    }
  },
  data() {
    return {
      selectedDeviceUuidList: [],
      btnLoading: false,
      addDialogVisible: false,
      dialogVisible: false,
      address: {
        longitude: null,
        latitude: null,
        location: ''
      },
      addressList: [],
      dataList: []
    };
  },
  methods: {
    handleSelectionChange(value) {
      this.selectedDeviceUuidList = value.map(item => {
        return item.uuid;
      });
      this.$emit('select', this.selectedDeviceUuidList);
    },
    showEdit(uuid) {
      this.$router.push('/device/edit/' + uuid);
    },
    checkHistory(uuid, name, serialNumber) {
      let historyRoute = this.$router.resolve({
        name: 'deviceHistory',
        query: {
          uuid: uuid,
          name: name,
          sn: serialNumber
        }
      });
      window.open(historyRoute.href, '_blank');
    },
    remove(uuid, name) {
      MessageBox.confirm(`确定删除区域${name}吗？`, '删除提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          deleteDeviceApi(uuid)
            .then(() => Message.success('删除设备成功'))
            .catch(error => Message.error(parseError(error)))
            .finally(() => this.$emit('search'));
        })
        .catch(() => {});
    },
    shortHandler({ order, prop }) {
      this.$emit('orderBy', prop);
      this.sort.sortType = order === 'ascending' ? SortType.ASC : SortType.DESC;
      this.$emit('search');
    },
    checkData(row) {
      this.dataList = row.dataList;
      this.dialogVisible = true;
    },
    checkDetail(uuid) {
      this.addressList = [];
      this.btnLoading = true;
      getDeviceInfoApi(uuid)
        .then(res => {
          this.address.latitude = res.latitude;
          this.address.longitude = res.longitude;
          this.address.location = res.location;
          this.addressList.push(this.address);
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => {
          this.addDialogVisible = true;
          this.btnLoading = false;
        });
    }
  }
};
</script>
